<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-25 21:42:34
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-30 10:55:21
 * @Description: 
-->
<template>
  <div class="income">
    <div class="left-small">
      <div class="navlist">
        <div
          @click="navTo('Income')"
          class="navItem"
          :class="activelink === 'income' ? 'active' : ''"
        >Income</div>
        <div
          @click="navTo('Orders')"
          class="navItem"
          :class="activelink === 'orders' ? 'active' : ''"
        >Orders</div>
        <div
          @click="navTo('withdraw')"
          class="navItem"
          :class="activelink === 'withdraw' ? 'active' : ''"
        >Withdraw</div>
      </div>
      <div class="withdrawnum">
        <div class="dollars">${{ walletNum.memberWallet }}</div>
        <div class="desc">ACCOUNT BALANCE</div>
        <div class="withdrawBtn" @click.stop="withdrawMethod">Withdraw</div>
      </div>
    </div>
    <div class="right-list">
      <router-view />
    </div>

    <!-- 提现 -->
    <a-modal
      v-model:visible="withModal"
      title="WITHDRAW"
      :foot="null"
      :cancel-button-props="{ disabled: true }"
      class="bigmodal"
      width='747px'
    >
      <template #footer>
        <a-button key="submit" type="primary" @click="confirmwithdraw">Confirm</a-button>
      </template>
      <a-radio-group v-model:value="type" class="radiogroup">
        <a-radio value="bank">Bank card</a-radio>
        <div class="cardlist">
          <div
            class="cardItem"
            :class="[slectedCardnum === item.id ? 'selected' : '']"
            v-for="item in banklist"
            @click.stop="choseCard(item.id)"
          >
            <div class="otherinfo">
              <div class="cardnum">{{ item.cardNumber }}</div>
              <div class="btns" v-if="slectedCardnum === item.cardNumber">
                <div class="linkbtn" @click.stop="delBankcards(item.cardNumber)">Delete</div>
                <div class="linkbtn">Edit</div>
              </div>
            </div>
            <img
              class="img"
              v-if="slectedCardnum === item.cardNumber"
              src="@/assets/product/chosed.png"
            />
          </div>
        </div>
        <div class="linkbtn" @click.stop="addAnew('bank')">+Add a new card</div>
        <a-radio value="paypal">Paypal</a-radio>
        <div class="cardlist">
          <div
            class="cardItem"
            :class="[slectedCardnum === item.cardNumber ? 'selected' : '']"
            v-for="item in paypalist"
            :key="item.cardNumber"
            @click.stop="choseCard(item.id)"
          >
            <div class="otherinfo">{{ item.cardNumber }}</div>
          </div>
        </div>
        <div class="linkbtn" @click.stop="addAnew('paypal')">+Add a new card</div>
      </a-radio-group>
    </a-modal>

    <!-- 添加银行卡 -->
    <a-modal
      v-model:visible="addcardVis"
      title="Add a new card"
      :foot="null"
      :cancel-button-props="{ disabled: true }"
      class="bigmodal addnewcard"
      dialogClass="addcardDialog"
    >
      <template #footer>
        <a-button key="submit" type="primary" @click="addBankcard(1)">Confirm</a-button>
      </template>
      <div class="banklist">
        <img src="@/assets/withdraw/1.png" style="width: 52.9px;height: 32.7px;" />
        <img src="@/assets/withdraw/2.png" style="width: 40.8px;height: 32.5px;" />
        <img src="@/assets/withdraw/3.png" style="width:42.9px;height: 34px;" />
        <img src="@/assets/withdraw/4.png" style="width:52.9px;height:36.9px" />
        <img src="@/assets/withdraw/5.png" style="width:52.2px;height:31.1px" />
        <img src="@/assets/withdraw/6.png" style="width: 51.5px;height:26.8px;" />
        <img src="@/assets/withdraw/7.png" style="width: 52.9px;height:36.2px;" />
        <img src="@/assets/withdraw/8.png" style="width: 54.4px;height:15.9px;" />
        <img src="@/assets/withdraw/9.png" style="width: 37.2px;height:38.3px;" />
      </div>
      <div class="form">
        <div class="title">Card number</div>
        <a-input v-model:value="cardNumber" placeholder="0000 0000 0000 0000"></a-input>
        <div class="seclst flex-sp-c">
          <div class="left" style="width:45%">
            <div class="title">Cardholder name</div>
            <a-input
              v-model:value="cardholderName"
              placeholder="Cardholder name"
              style="width: 100%;"
            ></a-input>
          </div>
          <div class="right" style="width:45%">
            <div class="title">Valid date</div>
            <a-input v-model:value="validDate" placeholder="xxxx/yy/zz" style="width: 100%;"></a-input>
          </div>
        </div>
        <div class="title">Cvv</div>
        <a-input v-model:value="cvv" placeholder="000"></a-input>
      </div>
    </a-modal>

    <!-- 添加paypal -->
    <a-modal
      v-model:visible="addcardPaypal"
      title="Add a new account"
      :foot="null"
      :cancel-button-props="{ disabled: true }"
      class="bigmodal"
      dialogClass="addcardDialog"
      width="3.505208rem"
    >
      <template #footer>
        <a-button key="submit" type="primary" @click="addBankcard(2)">Confirm</a-button>
      </template>
      <div class="banklist paypallist">
        <img src="@/assets/withdraw/paypal.png" />
      </div>
      <div class="form">
        <div class="title">Account number</div>
        <a-input v-model:value="cardNumber" placeholder="Please enter your paypal account"></a-input>
      </div>
    </a-modal>
  </div>
</template>

<script lang='ts' setup>
import { message } from 'ant-design-vue';
import { Dayjs } from 'dayjs';
import { reactive, toRefs, onBeforeMount, onMounted, ref, watch } from 'vue'
import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';
import { addCarditem, delCard, getbankcardlst, getIncomelist, getWallet, withdrawMoney } from '../../api/wallet';
import store from '../../store';
import { getStorageItem, setStorageItem } from '../../utils/utils';
import { ICarditem } from '../types';
interface DataProps { }


// 菜单跳转
const router = useRouter()
const walletAct = router.currentRoute.value.name
watch(
  () => router.currentRoute.value,
  (newVal, old) => {
    activelink.value = newVal.name
  }
)


const activelink = ref(walletAct)
const navTo = (item: string) => {
  const realLink = item === 'Income' ? '/wallet/income' : item === 'Orders' ? '/wallet/orders' : '/wallet/withdraw'
  router.push(realLink)
}


const walletNum: any = ref({})
const getwalletnum = async () => {
  const res = await getWallet()
  if (res) {
    walletNum.value = res.result
  }
}
onMounted(() => {
  getwalletnum()
})


// 提现
const withModal = ref(false)
const withdrawMethod = () => {
  withModal.value = !withModal.value
}
const type = ref('bank')

const banklist = ref<ICarditem[]>([])
const paypalist = ref<ICarditem[]>([])

const initBankandPaypal = async () => {
  const bankres = await getbankcardlst(1)
  const paypal = await getbankcardlst(2)
  if (bankres) {
    banklist.value = bankres.result
  }
  if (paypal) {
    paypalist.value = paypal.result
  }
}

const confirmwithdraw = async () => {
  if (slectedCardnum.value) {
    const data = {
      cardId: slectedCardnum.value,
      price: walletNum.value.memberWallet
    }
    const res = await withdrawMoney(data)
    if (res) {
      store.dispatch('user/updateHaswithdraw', true)
      message.success(res.message)
    }
    getwalletnum()
    withModal.value = false
  }

}

onMounted(() => {
  initBankandPaypal()
})

// 当前选中的银行卡号
const slectedCardnum = ref('')
// 选择银行卡
const choseCard = (num: string) => {
  slectedCardnum.value = num
}
// 删除一张银行卡
const delBankcards = async (number: string) => {
  const res = await delCard(number)
  if (res) {
    message.success(res.message)
  }
}
const addcardVis = ref(false)
const cardNumber = ref<string>()
const cardholderName = ref('')
const cvv = ref('')
const validDate = ref('')
const addBankcard = async (cardType: Number) => {
  let param = {
    cardNumber: cardNumber.value,
    cardholderName: cardholderName.value,
    cvv: cvv.value,
    validDate: validDate.value,
    cardType: cardType
  }
  const res = await addCarditem(param)
  if (res) {
    message.success(res.message)
    addcardVis.value = false
  } else {
    addcardVis.value = false
  }
  initBankandPaypal()
}
const addAnew = (type: string) => {
  withModal.value = false
  if (type === 'bank') {
    addcardVis.value = true
  } else {
    addcardPaypal.value = true
  }
}


const addcardPaypal = ref(false)
</script>
<style lang='scss'>
.income {
  width: 1600px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  .left-small {
    width: 387px;
    margin-right: 40px;
    .navlist {
      width: 387px;
      height: 244px;
      background-color: #fff;
      border-radius: 0 0 5px;
      border-top: 2px solid #e60044;
      padding: 3px 37px;
      margin-bottom: 20px;
      .navItem {
        width: 100%;
        height: 79px;
        line-height: 79px;
        font-size: 24px;
        font-family: Galvji;
        font-weight: normal;
        color: #000000;
        cursor: pointer;
      }
      .navItem:nth-child(2) {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
      }
      .navItem.active {
        font-weight: bold;
      }
    }
    .withdrawnum {
      width: 100%;
      height: 326px;
      background-color: #fff;
      border-top: 2px solid #e60044;
      text-align: center;
      padding-top: 79px;
      .dollars {
        font-size: 48px;
        font-family: Galvji;
        font-weight: bold;
        color: #e60044;
      }
      .desc {
        font-size: 18px;
        font-weight: normal;
        color: #000;
      }
      .withdrawBtn {
        width: 170px;
        height: 48px;
        background-color: #e60044;
        border-radius: 25px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        margin-top: 61px;
      }
    }
  }
  .right-list {
    flex: 1;
    min-height: 100vh;
    background-color: #fff;
    border-top: 2px solid #e60044;
    padding: 8px 50px;
    .topsets {
      height: 97px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .btns {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Galvji;
        font-weight: 400;
        text-decoration: underline;
        color: #e60044;
        cursor: pointer;
        .daysbtn {
          margin-right: 41px;
        }
      }
      .selects {
        display: flex;
        align-items: center;
        .kol-btn {
          height: 48px;
          width: 95px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 16px;
          font-size: 16px;
        }
        .ant-calendar-picker {
          height: 48px;
          .ant-calendar-picker-input.ant-input {
            height: 48px;
            line-height: 48px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}

.addnewcard {
  .ant-modal-content {
    width: 673px;
    height: auto;
  }
}

.ant-modal-header {
  height: 56px;
  padding: 42px 51px 0;
  border: none;
  .ant-modal-title {
    font-size: 18px;
    font-family: Galvji;
    font-weight: bold;
  }
}
.ant-modal-body {
  flex: 1;
  padding: 39px 50px 0 50px;
  .ant-input-group-wrapper {
    margin-bottom: 15px;
  }
  .radiogroup {
    display: flex;
    flex-direction: column;
    .cardlist {
      padding-top: 25px;
    }
    .cardItem {
      height: 80px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      margin-top: 32px;
      padding: 18px 26px;
      display: flex;
      cursor: pointer;
      .banktype {
        width: 83px;
        height: 43px;
        img {
          width: 83px;
          height: 43px;
        }
      }
      .otherinfo {
        flex: 1;
        height: 43px;
        display: flex;
        align-items: center;
        .cardnum {
          flex: 1;
          font-size: 18px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
        }
        .btns {
          width: 245px;
          display: flex;
          height: 43px;
          align-items: center;
          .linkbtn {
            margin-left: 53px;
          }
        }
      }
    }
    .cardItem:first-child {
      margin-top: 0;
    }
    .cardItem.selected {
      border: 2px solid #e60044;
      border-radius: 10px;
      position: relative;
      .img {
        width: 60px;
        height: 51px;
        position: absolute;
        top: 0;
        right: -1px;
      }
    }
    .linkbtn {
      font-size: 16px;
      font-family: Galvji;
      font-weight: 400;
      text-decoration: underline;
      color: #e60044;
      text-align: right;
      cursor: pointer;
    }
  }
}
.ant-modal-footer {
  height: 88px;
  border: none;
  text-align: center;
  .ant-btn {
    width: 350px;
    height: 48px;
    background: #000000;
    border-radius: 24px;
  }
}

.addcardDialog {
  .ant-modal-content {
    width: 673px;
  }
  .ant-modal-header {
    height: auto;
    padding: 42px 50px;
  }
  .ant-modal-body {
    padding: 0 51px 0;
    padding-bottom: 30px;
    .banklist {
      display: flex;
      justify-content: space-between;
      margin-bottom: 39px;
      align-items: center;
      img {
        width: 52px;
      }
    }
    .paypallist {
      img {
        width: 132px;
      }
    }
    .form {
      .title {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        margin-bottom: 10px;
      }
      input{
        height: 48px;
        line-height: 48px;
      }
      .seclst {
        margin-top: 30px;
        margin-bottom: 30px;
      }
    }
  }
}
</style>
